import styled from "@emotion/styled"
import { SvgComponent } from "@/components/base/Svg"
import { ImageComponent } from "@/components/base/Image"
import CouponCard from "./CouponCard"
import CountdownTimer from "./CountdownTimer"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { useState, memo } from "react"
import { NavLink } from "react-router-dom"
import SlotBettingRankingsPopup, { ActionType } from "./SlotBettingRankingsPopup"

const BgWelfare = styled(ImageComponent("pages/Walfare/images/bg_welfare.webp"))`
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 375rem;
    height: 500rem;
    & > img {
        width: 100%;
        height: 100%;
        preserveaspectratio: "none";
    }
`

const CardBox = styled.div`
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 220rem;
    padding: 34rem 16rem 24rem 16rem;
    font-family: "Gilroy";
    color: #fff;
    position: relative;
`

const Header = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44rem;
    margin-bottom: 24rem;
    z-index: 1;
`

const Title = styled.span`
    font-weight: 700;
    font-size: 18rem;
`

const ServiceIcon = styled(SvgComponent("pages/Walfare/svg/service.svg"))`
    width: 24rem;
    height: 24rem;
    cursor: pointer;
`

const Main = styled.div`
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 1;
`

const TotalBonus = styled.p`
    height: 24rem;
    line-height: 24rem;
    font-weight: 700;
    font-size: 16rem;
    margin: 0;
    color: #ffffffbf;
`

const TotalMoney = styled.div`
    height: 48rem;
    line-height: 48rem;
    font-weight: 700;
    font-size: 32rem;
    display: flex;
    align-items: center;
    gap: 5rem;
`

const Detail = styled.div`
    height: 20rem;
    font-size: 14rem;
    line-height: 20rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5rem;
    margin-bottom: 12rem;
    cursor: pointer;
    color: #ffffffbf;
    img {
        width: 12rem;
        height: 10rem;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }

    &.active img {
        transform: rotate(90deg);
    }
`

const DetailContent = styled.div<{ isShow: boolean }>`
    width: 100%;
    min-height: ${(props) => (props.isShow ? "248rem" : "0")};
    max-height: ${(props) => (props.isShow ? "248rem" : "0")};
    opacity: ${(props) => (props.isShow ? "1" : "0")};
    padding: ${(props) => (props.isShow ? "16rem" : "0")};
    background: #f8c0c3;
    border-radius: 10rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
    transform: ${(props) => (props.isShow ? "scaleY(1)" : "scaleY(0)")};
    z-index: 1;
    .title {
        height: 24rem;
        font-weight: 700;
        color: #131416;
        font-size: 16rem;
        margin-bottom: 4rem;
    }
    .max-get {
        font-size: 12rem;
        display: flex;
        height: 16rem;
        align-items: center;
        gap: 7rem;
        margin-bottom: 12rem;
        > .left {
            color: #40444f;
            font-weight: 500;
        }
        > .right {
            color: #ff1f57;
            font-weight: 400;
        }
    }

    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 94rem;
        width: 100%;
        .card-bt-bg {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }
        .invalid {
            color: #f50016;
            margin: 24rem 8rem 0 8rem;
        }
    }
`

const ButtonRegularBox = styled(ButtonRegular)`
    width: calc(100% - 16rem);
    height: 40rem;
    box-shadow: none;
    margin: 4rem 8rem 0 8rem;
    font-weight: 500 !important;
`

/**
 * 无效状态组件
 * 显示倒计时和无效状态文本
 */
export const Invalid = memo(() => {
    const Invalid = styled.div`
        color: #f50016;
        font-size: 10rem;
        display: flex;
        gap: 6rem;
    `
    return (
        <Invalid className="invalid">
            <span className="text">invalid in</span>
            <CountdownTimer />
        </Invalid>
    )
})

export default function WelfareBonusCard() {
    const [isShow, setIsShow] = useState(true)
    const [currentAction, setCurrentAction] = useState<ActionType>("")

    return (
        <>
            <CardBox>
                <BgWelfare />
                <Header>
                    <Title>Walfare</Title>
                    <NavLink to="/my/service">
                        <ServiceIcon />
                    </NavLink>
                </Header>
                <Main>
                    <TotalBonus>Total Bonus Claimed(PHP)</TotalBonus>
                    <TotalMoney>
                        <span>₱</span>
                        <span>23456</span>
                    </TotalMoney>
                    {/* <Detail
                        className={isShow ? "active" : ""}
                        onClick={() => setIsShow(!isShow)}
                    >
                        <span>Detail</span>
                        <Svg src="pages/Walfare/svg/union.svg" />
                    </Detail> */}
                </Main>
                {/* <DetailContent isShow={isShow}>
                    <div className="title">Top-up Bouns</div>

                    <div className="max-get">
                        <span className="left">Get up to:</span>
                        <span className="right"> ₱ 200000 </span>
                    </div>

                    <CouponCard useChecked />

                    <div className="footer">
                        <Svg
                            className="card-bt-bg"
                            preserveAspectRatio="none"
                            src="pages/Walfare/svg/card_bt.svg"
                        />
                        <Invalid />

                        <ButtonRegularBox onClick={() => setCurrentAction("time")}>
                            Top-up Now
                        </ButtonRegularBox>
                    </div>
                </DetailContent> */}
            </CardBox>
            <SlotBettingRankingsPopup
                action={currentAction}
                clearAction={() => setCurrentAction("")}
            />
        </>
    )
}
